<html>

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#bt_element").click(function () {
                $('p:first').hide();
            });
            $("#bt_id").click(function () {
                $('#span_id').hide();
            });
            $("#bt_class").click(function () {
                $('.test').hide();
            });
            $('#sp_current').click(function () {
                $(this).css('color', 'purple');
            });
            $('tr:even').css('background-color','pink');
            $('tr:odd').css('background-color','gray')
        }
        );
        function setAllGreen() {
            $('*').css('color', 'green');
        }
        function getelementbyclass() {
            $('span.test').html('the new html text');
        }
        function getfirstelement() {
            $('span:first').css('color', 'red');
        }
        function getfirstul() {
            $('ul li:first').html('banana');
        }
        function getallfirstul() {
            $('ul li:first-child').css('color', 'pink');
        }
        function gethrefpro() {
            $('[href]').attr('href', 'http://www.qq.com');
        }
        function getinputproistext(){
            $('input[type=text]').attr('value','newvalue');
        }
        function getinputproisnottext(){
            
            $("input[type!='text']").attr('type','text');
        }
        function hideOrView(){
            var typ= $('input:first').attr('type');
            if(typ=="text"){$('input:first').attr('type','password');}
            else{$('input:first').attr('type','text');}
        }
    </script>
    <style>
        .test {
            color: #00f
        }
    </style>
</head>
<h3>元素选择器 $('p') 所有P元素</h3>
Example:
<br>
<p>p元素内容</p>
<button id="bt_element">隐藏第一个p元素</button>
<hr>

<h3>Id选择器 $("#id") 根据id查找元素</h3>
Example:
<br>
<span id="span_id">id选择器例子(id=span_id)</span><br>
<button id="bt_id">隐藏第id=span_id的元素</button>
<hr>
<h3>类选择器 $(".class") 根据class查找元素</h3>
Example:
<br>
<span class="test">类选择器事例(class=test)</span><br>
<button id="bt_class">隐藏class=test的元素</button>
<br>
<hr>
<h3>选取所有元素 $('*')</h3>
<button type="button" onclick="setAllGreen()">所有元素设置为绿色</button>
<hr>
<h3>设置当前html元素 $(this) 备注：必须写到id选择器内</h3>
<span id='sp_current'>设置当前元素</span>
<hr>
<h3>选取某个元素span 的class为test 的项 $('span.test') </h3>
<span class="test">span的class=test</span>
<br>
<button type="button" onclick="getelementbyclass()">获取span的class为test</button>
<hr>
<h3>选取span的第一个元素 $('span:first')</h3>
<button type="button" onclick="getfirstelement()">获取第一个元素</button>
<hr>
<h3>选取ul的第一个li $('ul li:first') 选取所有ul 的第一个li $('ul li:first-child')</h3>
<ul>
    <li>apple</li>
    <li>orange</li>
</ul>
<ul>
    <li>red</li>
    <li>yellow</li>
</ul>
<button type="button" onclick="getfirstul()">选取第一个li</button>
<button type="button" onclick="getallfirstul()">选取所有第一个li</button>
<hr>
<h3>选取带有某个属性的 $('[href]') 选取带有href属性的</h3>
<a href="http://www.baidu.com">连接</a>
<br>
<button type="button" onclick="gethrefpro()">选取带有href属性的</button>
<hr>
<h3>选取某个 标签的属性为xx的 $('input[type=text]') 表单元素中类型为文本的  $("input[type!='text']")</h3>
<input type="text" value="test" /><a href="javascript:hideOrView()">👀</a><br>
<input type="password" value="test" /><br>
<button type="button" onclick="getinputproistext()">获取目标属性为文本的</button>
<button type="button" onclick="getinputproisnottext()">获取目标属性不为文本的</button>
<hr>
<h3>选取所有单双行$('tr:even')偶数  $('tr:odd')单数</h3>
<table>
    <thead>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
    </thead>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>10</td>
    </tr>
    <tr>
        <td>2</td>
        <td>张y</td>
        <td>12</td>
    </tr>
    <tr>
        <td>3</td>
        <td>张s</td>
        <td>13</td>
    </tr>
    <tr>
        <td>4</td>
        <td>张a</td>
        <td>16</td>
    </tr>
    <tr>
        <td>5</td>
        <td>张d</td>
        <td>17</td>
    </tr>
</table>
</html>